<template>
  <a-config-provider :locale="locale">
    <div id="app" class="app">
      <a-menu
        style="width: 256px; height: 100%"
        :default-selected-keys="['1']"
        :open-keys.sync="openKeys"
        mode="inline"
        @click="handleClick"
      >
        <a-sub-menu v-for="item in menu" :key="item.key">
          <span slot="title"
            ><span>{{ item.name }}</span></span
          >
          <a-menu-item v-for="subItem in item.subMenu" :key="subItem.key">
            <router-link :to="subItem.route"> {{ subItem.name }}</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
      <router-view></router-view>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import { menu } from './config/index';
export default {
  name: 'App',
  data() {
    return {
      locale: zhCN,
      current: ['mail'],
      openKeys: ['sub1'],
      menu: menu,
    };
  },
  watch: {
    openKeys(val) {
      console.log('openKeys', val);
    },
  },
  methods: {
    handleClick(e) {
      console.log('click', e);
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  padding: 12px;
  height: 100%;
  overflow: auto;
  display: flex;
}
</style>
